<template>
	<view class="content">
		<view class="list">
			<view class="flex list-li po before" @click="open('/pages/news/bulletin-list/bulletin-list')">
				<view class="">
					公告
				</view>
				<view class="">
					
				</view>
			</view>
			<view class="flex list-li po before" @click="open('/pages/login/change-mobile/change-mobile')">
				<view class="">
					更换手机
				</view>
				<view class="">
					
				</view>
			</view>
			<view class="flex list-li po before" @click="open('/pages/about/about')">
				<view class="">
					关于我们
				</view>
				<view class="">
					
				</view>
			</view>
			<view class="flex list-li po before" @click="open('/pages/feedback/feedback')">
				<view class="">
					投诉建议
				</view>
				<view class="">
					
				</view>
			</view>
			<view class="flex list-li po before" @click="tel">
				<view class="">
					客服热线
				</view>
				<view class="">
					<text>{{telText}}</text>
				</view>
			</view>	
			<view class="flex list-li po before">
				<view class="">
					当前版本
				</view>
				<view class="">
					<text>V {{version}}</text>
				</view>
			</view>		
		</view>
		<view class="flex list-li po before mt1" @click="open('/pages/privacy/privacy')">
			<view class="">
				隐私条款
			</view>
			<view class="">
				 
			</view>
		</view>
		<view class="flex list-li po before " @click="open('/pages/page/page')">
			<view class="">
				用户协议
			</view>
			<view class="">
				
			</view>
		</view>
		<view class="flex list-li po before " @click="open('/pages/login/protocol/protocol')">
			<view class="">
				爱八方产品经销合同
			</view>
			<view class="">
				
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="flex list-li po before mt1" @click="app()">
			<view class="">
				下载app
			</view>
			<view class="">
				
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef APP-PLUS -->
			<view class="" style="padding: 20upx; color: #c7c7c7;font-size: 24upx;">
				第三方账号绑定
			</view>
			<view class="uni-list" >
				<view class="uni-list-cell uni-list-cell-pd">
					<view class="uni-list-cell-db">微信</view>
					<switch :checked="wechat.is" color="#04BE02" @change="switchChange" style="transform:scale(0.7)"/>
				</view>
			</view>
		<!-- #endif -->
		
		<view class="mt2 out-btn" @click="out">
			退出登录
		</view>
	</view>
</template>

<script>
	import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		computed: {
            ...mapState(['token'])
        },
		data() {
			return {
				version: '1.0',
				telText: '',
				wechat: {
					"type": "wechat",
					"name": "微信",
					"is_bind": 0, //是否绑定 1：是 0：否
					"is": true
				},
				openid: null,
				unionid: null,
				appLink: ''
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.version = plus.runtime.version
			console.log('version:'+plus.runtime.version)
			// #endif
			
			this.getConfig()
			
			this.getlist()
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest','logout']),
			app(){
				if(this.appLink){
					window.location.href = this.appLink
				}
			},
			getlist() {
				this.vuexRequest({
					url: '/api/v2/member/auth/index?access-token=' + this.token,
					method: 'GET',
					data: {},
					success: (res) => {
						if(res.data.data.wechat){
							this.wechat = res.data.data.wechat
							this.wechat.is_bind == 1 ? this.wechat.is = true : this.wechat.is = false
						}
					},
					fail: (err)  => {
						
					},
				})
			},
			out() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '退出登录？',
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/tabbar/myPlace/dealer'
							});
							_this.logout()
							// #ifdef H5
							this.clearCookie('access-token')
							// #endif
						} 
					}
				});
			},
			setCookie(cname, cvalue, exdays){
				let d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				let expires = "expires="+d.toUTCString();
				document.cookie = cname + "=" + cvalue + "; " + expires;
			},
			clearCookie(name){
				this.setCookie(name, "", -1)
			},
			tel() {
				if(this.telText){
					uni.makePhoneCall({
						phoneNumber: this.telText //仅为示例
					});
				}
			},
			open(url) {
				if(this.token){
					uni.navigateTo({
						url: url
					});
				}else{
					uni.navigateTo({
						url: '/pages/login/login/login'
					});
				}
			},
			getConfig(){
				let url = ''
				if(this.token){
					url =  '/api/addons/execute?route=setting/get-config&addon=o-s-mall-dist&access-token=' + this.token
				}else{
					url =  '/api/addons/execute?route=setting/get-config&addon=o-s-mall-dist'
				}	
				this.vuexRequest({
					url: url,
					method: 'GET',
					data: {},
					success: (res)  => {
						if(res.data.data.appHotLine){
							this.telText = res.data.data.appHotLine
						}
						
						if(res.data.data.appLink){
							this.appLink = res.data.data.appLink
						}
					},
					fail: (err)  => {
					},
				})
			},
			switchChange: function (e) {
				if(e.target.value){
					// #ifdef APP-PLUS
					this.oauth('weixin')
					// #endif
					// #ifdef H5
					this.oauthLogin()
					// #endif
				}else{
					this.vuexRequest({
						url: '/api/v2/member/auth/unbind?access-token=' + this.token,
						method: 'POST',
						data: {oauth_client: 'wechat'},
						success: (res)  => {
							uni.showToast({
								icon: 'none',
								title: res.data.message,
								position:'bottom'
							})
						},
						fail: (err)  => {
							uni.showToast({
								icon: 'none',
								title: err.data.message,
								position:'bottom'
							})
						},
					})
				}
			},
			oauth(id) {
				uni.login({
				  provider: id,
				  success: (loginRes) => {
					this.openid = loginRes.authResult.openid
					this.unionid = loginRes.authResult.unionid
				    this.oauthLogin()
					
				  }
				});
			},
			oauthLogin() {
				let data = {}
				// #ifdef APP-PLUS
				 data = {oauth_client: 'wechat',group:'app',oauth_client_user_id: this.openid,'unionid': this.unionid}
				// #endif
				// #ifdef H5
				data = {oauth_client: 'wechat',group:'app'}
				// #endif
				this.vuexRequest({
					url: '/api/v2/member/auth/bind?access-token=' + this.token,
					method: 'POST',
					data: data,
					success: (res)  => {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							position:'bottom'
						})
					},
					fail: (err)  => {
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			}
		}
	}
</script>

<style>
	.out-btn{
		text-align: center;
		color: rgb(232, 62, 65);
		padding: 20upx;
	}
	.mt2{
		margin: 40upx 0 0 0;
		background: #FFFFFF;
	}
	.mt1{
		margin: 20upx 0 0 0;
	}
	.list{
		background: #FFFFFF;
	}
	.list-li{
		padding: 20upx 60upx 20upx 20upx;
		background: #FFFFFF;
	}
	.list-li text{
		color: #c7c7c7;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.before:before{
		position: absolute;
		z-index: 10;
		right: 30upx;
		top: 50%;
		margin: -8upx 0 0 0;
		content: '';
		display: block;
		width: 16upx;
		height: 16upx;
		border: solid 2upx #989898;
		transform:rotate(45deg);
		border-left: none;
		border-bottom: none;
	}
	.uni-list-cell-pd{
		padding: 10upx 0 10upx 20upx;
	}
	.uni-list::before,.uni-list:after{
		display: none;
	}
</style>
